import { useRef, useState } from "react";

function Form() {

    const [username, setUsername] = useState(null);
    const [textarea, setTextarea] = useState('请撰写一篇关于你喜欢的 DOM 元素的文章.');
    const [selections, setSelections] = useState('mango');
    const [sex, setSex] = useState(1);
    const inithobby = [
        {
            'title': "睡觉",
            'checked': false,
        },
        {
            'title': "吃饭",
            'checked': false
        },
        {
            'title': "敲代码",
            'checked': false
        }
    ]
    const [hobby, setHobby] = useState(inithobby);
    const fileInput = useRef(null);

    // function handleChangeSex(event) {
    //     const target = event.target;
    //     console.log(target.value);
    //     setUsername(target.value)
    //     // const name = target.name
    //     // setState() 自动将部分状态合并到当前状态
    //     // this.setState({
    //     // 设置表单元素的 value 属性之后，其显示值将由 this.state.value 决定
    //     //     [name]: target.value
    //     // })
    // }
    // function handleChange(event) {
    //     const target = event.target;
    //     const name = target.name
    //     // setState() 自动将部分状态合并到当前状态
    //     this.setState({
    //         // 设置表单元素的 value 属性之后，其显示值将由 this.state.value 决定
    //         [name]: target.value
    //     })
    // }
    function handleSubmit(event) {
        console.log(event)
        // 获取上传文件的内容
        console.log(fileInput.current.files)
        event.preventDefault();
    }
    function changeHobby(key) {
        hobby[key].checked = !hobby[key].checked;
        setHobby(hobby);
    }
    return (
        <>
            <form onSubmit={handleSubmit}>
                <div className="item">
                    <label>
                        名字:<span>{username}</span>
                        <input name="username" type="text" value={username || ''} onChange={(e) => setUsername(e.target.value)} />
                    </label>
                </div>
                <div className="item">
                    <label>
                        文章:
                    </label>
                    <textarea name="textarea" value={textarea || ''} onChange={(e) => setTextarea(e.target.value)} />
                </div>
                <div className="item">
                    <label>
                        选择你喜欢的风味:
                        <select value={selections} onChange={(e) => setSelections(e.target.value)} name="selections">
                            <option value="grapefruit">葡萄柚</option>
                            <option value="lime">酸橙</option>
                            <option value="coconut">椰子</option>
                            <option value="mango">芒果</option>
                        </select>
                    </label>
                </div>
                <div className="item">
                    <label>
                        文件:
                        <input type="file" ref={fileInput} multiple="multiple" />
                    </label>
                </div>
                <div className="item">
                    <label>
                        性别:
                        <input name="sex" type="radio" value="1" checked={sex} onChange={(e) => setSex(e.target.value)} />男

                        <input name="sex" type="radio" value="2" checked={sex} onChange={(e) => setSex(e.target.value)} /> 女
                    </label>
                </div>
                <div className="item">
                    <label>
                        爱好:
                        {   //注意key值指向
                            hobby.map((value, key) => {
                                return (
                                    <span key={key}>
                                        <input type="checkbox" checked={value.checked}
                                            onChange={changeHobby.bind(key)} />
                                        {value.title}
                                    </span>)
                            })
                        }
                    </label>
                </div>
                <div className="item">
                    <input type="submit" value="提交" />
                </div>
            </form>
        </>
    )
}

export default Form